<template>
  <div class="content">
    <sketch v-model:colors="colors"></sketch>
    <color-picker v-model:colors="colors" @update:colors="onChange"></color-picker>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Sketch from '../src/components/Sketch.vue'
import ColorPicker from '../src/components/ColorPicker.vue'

const defaultProps = {
  hex: '#194d33e6',
  hsl: {
    h: 150,
    s: 0.5,
    l: 0.2,
    a: 0.9
  },
  hsv: {
    h: 150,
    s: 0.66,
    v: 0.30,
    a: 0.9
  },
  rgba: {
    r: 159,
    g: 96,
    b: 43,
    a: 0.9
  },
  a: 0.9
}

export default defineComponent({
  name: 'App',
  components: { ColorPicker, Sketch },
  setup() {
    const colors = ref(defaultProps)

    return {
      colors,
      onChange(c) {
        console.log(c)
        console.log(colors.value)
      },
    }
  },
})
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  margin: 0;
}

html, body, #app {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
}

.content {
  padding: 20px;
  display: flex;

  .v-color-picker__trigger {
    margin-left: 20px;
  }
}

</style>
